<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<style type="text/css">
		h1{
			text-align: center;
		}
		.biaodan {
			padding: 45px;
			margin: 0 auto;
			border: solid #B0B0B0 1px;
			border-radius: 8px;
			box-shadow: 2px 2px 5px #B0B0B0;
			width: 750px;
			height: 480px;
			display: flex;
			flex-direction: column;
			font-size: 16px;	
			font-family: "微软雅黑";		
			line-height: 40px;
		}
		span{
			display: inline-block;
			text-align: right;
			width: 100px;
			padding-right: 6px;
		}
		#jianjie{
			flex-wrap:wrap;
		}
		#bottom{
			display: flex;
			justify-content: center;
			
		}
	</style>
	<body>
		<h1>表单</h1>
		<div class="biaodan">
			<form  method="post">
				
				<p><div id="yonghuming">
					<span>用户名：</span>
					<input type="text" placeholder="请输入用户名" id="username"
						style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
					<input type="button" 
						style="border: none;border-bottom: 1px solid #000000;" value="校验用户名是否合法" />
				</div></p>
				
				
				<p><div id="mima">	
					<span>密码：</span>
					<input type="password" placeholder="请输入密码" id="password"
						style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
				</div>
				
				<p><div id="mima">	
				<span>确认密码：</span>
				<input type="password" placeholder="请再次输入密码" id="passwordAgain" 
					style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
				</div></p>
				
				
				<p><div id="sex">	
				<span>性别：</span>
				<input type="radio" name="sex" id="sexmale" value="1"/>男
					<input type="radio" name="sex" id="sexfamale" value="2"/>女
				</div></p>
				
				
				<p><div id="hobby">
				<span>爱好：</span>
				<input type="checkbox" name="hobby" value="篮球"/>篮球
					<input type="checkbox" name="hobby" value="跑步"/>跑步
					<input type="checkbox" name="hobby" value="游泳"/>游泳
					<input type="checkbox" name="hobby" value="打游戏"/>打游戏
				</div></p>
				
				
				<p><div>
				<span>专业：</span>
				<select id="subject">
					<option>计算机</option>
					<option>软件技术</option>
					<option>电信</option>
					<option>商英</option>
					<option>物流</option>
					<option>城规</option>
					
				</select>
				</div></p>
				
				
				<p><div>
				<span>个人简介：</span>
				<textarea id="myInfo">
					
				</textarea>
				</div></p>
				
				
				<p><div id="touxiang">
				<span>头像：</span><input type="file" />
				</div></p>
				
				
				<p><div id="bottom">	
				<input type="button"  onclick="getValue()" id="btn" value="提交" style="margin-right: 30px;"/>
				<input type="button" value="重置" style="margin-left: 30px;"/>
				</div></p>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		
		function getValue(){
			//获取输入框里的值
			let oUsername=document.getElementById('username')
			let usernameStr=oUsername.value
			if(usernameStr.length===0){
				alert("请输入用户名！")
				return
			}
			
			
			let oPassword=document.getElementById('password')
			let passwordStr=oPassword.value
			if(passwordStr.length===0){
				alert("请输入密码！")
				return
			}
			
			let oPasswordAgain=document.getElementById('passwordAgain')
			let passwordAgainStr=oPasswordAgain.value
			if(passwordAgainStr.length===0){
				alert("请再次确认密码！")
				return
			}
			
			
			if(passwordStr!==passwordAgainStr){
				alert("密码输入不一致！")
				return
			}
			
			console.log(usernameStr)
			console.log(passwordStr)
			console.log(passwordAgainStr)
			
			
			//获取单选框里的值      性别
			//1
//			let oSexMale=document.getElementById('sexmale')
//			let oSexFamale=document.getElementById('sexfamale')
//			if(oSexMale.checked){
//				console.log('性别：男')
//			}
//			if(oSexFamale.checked){
//				console.log('性别：女')
//			}
			
			//2  Map   map.set设置值
			let map=new Map()
			map.set("1",'男')
			map.set("2",'女')
			let oSex=document.getElementsByName('sex')
			let sexValue=''
			for (var i = 0; i < oSex.length; i++) {
				if(oSex[i].checked){
					sexValue=oSex[i].value
					break
				}
			}
			if(sexValue.length === 0){
				console.log('未选中性别')
			}else{
				console.log(map.get(sexValue))
			}
			if(sexValue===""){
				alert("请选择性别！")
			}
			
			
			//获取多选框里的值      爱好
			let hobbyValueList=[]
			let oHobby=document.getElementsByName('hobby')
			for (var i = 0; i < oHobby.length; i++) {
				if(oHobby[i].checked){
					hobbyValueList.push(oHobby[i].value)
				}
			}
			
			console.dir(hobbyValueList.join(','))
			if(hobbyValueList.length===0){
				alert("请选择爱好！")
				return
			}
			
			
			
			//下拉框   专业
			let oSelect=document.getElementById('subject')
			let oOptions=oSelect.options
			let selectedIndex=oSelect.selectedIndex
			console.dir(oOptions[selectedIndex].value)
			if(oOptions[selectedIndex].length===0){
				alert("请选择专业！")
				return
			}
			
			
			//文本框  简历
			let oMyInfo=document.getElementById('myInfo')
			console.dir(oMyInfo.value)
			if(oMyInfo.length===0){
				alert("请填写简历！")
				return
			}
		}
	</script>
</html>
